<style lang='scss' scoped>
@import "@css/style.scss";
.goods-options {
  width: 100%;
  border-bottom: 1px solid $lineColor;
  //一级选项
  &-list {
    display: flex;
    width: 100%;
    height: px2rem(46);
    background-color: #fff;
    align-items: center;
    &-item {
      flex-grow: 1;
      &-content {
        height: 100%;
        display: flex;
        justify-content: center;

        &-name {
          font-size: $infoSize;
          margin-right: $marginSize;
          &-active {
            color: $mainColor;
          }
        }
        &-caret {
          position: relative;
          top: 3px;
          //动画图标
          &-open {
            transform: rotate(-180deg);
            transition: all 0.3s;
          }
          &-close {
            transform: rotate(0deg);
            transition: all 0.3s;
          }
        }
      }
    }
  }

  //子选项
  .options-sub-content {
    position: absolute;
    width: 100%;
    max-height: px2rem(180);
    overflow: hidden;
    overflow-y: auto;
    background-color: #fff;
    &-list {
      &-item {
        &-content {
          display: flex;
          align-items: center;
          border-top: 1px solid $lineColor;
          padding: $marginSize;
          height: px2rem(44);
          box-sizing: border-box;
          &-name {
            font-size: $infoSize;
            display: inline-block;
            flex-grow: 1;
            &-active {
              color: $mainColor;
            }
          }

          &-select {
            width: px2rem(18);
            height: px2rem(18);
          }
        }
      }
    }
  }
  .fold-height-enter-active {
    animation-duration: 0.3s;
    animation-name: fold-height-open;
  }
  @keyframes fold-height-open {
    0% {
      max-height: 0;
    }
    100% {
      max-height: px2rem(180);
    }
  }
  .fold-height-leave-active {
    animation: fold-height-close 0.3s;
  }
  @keyframes fold-height-close {
    0% {
      max-height: px2rem(180);
    }
    100% {
      max-height: 0;
    }
  }
  //遮盖
  .cover{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: rgba(0,0,0,.4);

  }
}
</style>
<template>
  <div class="goods-options z-index-2">
    <ul class="goods-options-list">
      <li
        class="goods-options-list-item"
        v-for="(item, index) in optionsDatas"
        :key="index"
      >
        <a
          class="goods-options-list-item-content"
          @click.prevent="onOptionsItemClick(item, index)"
        >
          <span
            class="goods-options-list-item-content-name"
            :class="{
              'goods-options-list-item-content-name-active':
                selectOptions.id === item.id,
            }"
            >{{ item.name }}</span
          >
          <span
            class="goods-options-list-item-content-caret caret"
            v-if="item.subs.length > 0"
            :class="[
              isShowSubContent && selectOptions.id === item.id
                ? 'goods-options-list-item-content-caret-open'
                : 'goods-options-list-item-content-caret-close',
            ]"
          ></span>
        </a>
      </li>
    </ul>
    <!-- 子选项 -->
    <transition name="fold-height">
      <div class="options-sub-content z-index-2" v-show="isShowSubContent">
        <ul class="options-sub-content-list">
          <li
            class="options-sub-content-list-item"
            v-for="(item, index) in selectOptions.subs"
            :key="index"
          >
            <a
              class="options-sub-content-list-item-content"
              @click.prevent="onSubOptionsItemClick(item, index)"
            >
              <span
                class="options-sub-content-list-item-content-name"
                :class="{
                  'options-sub-content-list-item-content-name-active':
                    selectOptions.id === item.id,
                }"
                >{{ item.name }}</span
              >
              <img
                class="options-sub-content-list-item-content-select"
                v-show="selectOptions.id === item.id"
                src="@img/options-select.svg"
                alt=""
              />
            </a>
          </li>
        </ul>
      </div>
    </transition>

    <!-- 遮盖 -->
    <div class="cover" v-show="isShowSubContent" @click="isShowSubContent=fasle">

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //筛选数据源
      optionsDatas: [
        {
          id: "1",
          name: "默认",
          subs: [
            {
              id: "1",
              name: "默认",
            },
            {
              id: "1-2",
              name: "价格由高到低",
            },
            {
              id: "1-3",
              name: "销量由高到低",
            },
          ],
        },
        {
          id: "2",
          name: "有货优先",
          subs: [],
        },
        {
          id: "3",
          name: "直营优先",
          subs: [],
        },
      ],
      //选中的筛选
      selectOptions: {},
      //标记子选项是否展开
      isShowSubContent: false,
    };
  },
  created() {
    this.selectOptions = this.optionsDatas[0];
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    //一级选项选择事件
    onOptionsItemClick(item) {
      if (this.isShowSubContent) {
        this.isShowSubContent = false;
        return;
      }
      if (item.subs.length > 0 && this.selectOptions.id === item.id) {
        this.isShowSubContent = true;
      }
      //设置选择项
      this.selectOptions = item;
    },
    //二级选择事件
    onSubOptionsItemClick(item) {
      //设置选中项为点击数据
      this.selectOptions = item;
      //找到子项目置换到一级
      this.optionsDatas.forEach((options) => {
        options.subs.forEach((subOptions) => {
          if (subOptions.id == this.selectOptions.id) {
            options.id = subOptions.id;
            options.name = subOptions.name;
          }
        });
      });
      //关闭子选项视图
      this.isShowSubContent = false;
    },
  },
  computed: {},
  watch: {
    /**
     * 监听筛选改变
     */
    selectOptions(newValue) {
      this.$emit('optionsChange',newValue.id);
    }
  },
};
</script>